<template>
	<div class="user-manage-container">
		<el-card class="header">
			<div>
				<el-button v-permission="['importUser']" @click="onImportExcelClick" type="primary">
					{{$t('msg.excel.importExcel')}}
				</el-button>
				<el-button @click="onToExcelClick" type="success">{{$t('msg.excel.exportExcel')}}</el-button>
			</div>
		</el-card>
		<el-card>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column label="#" type="index" />
				<el-table-column prop="username" :label="$t('msg.excel.name')">
				</el-table-column>
				<el-table-column prop="mobile" :label="$t('msg.excel.mobile')">
				</el-table-column>
				<el-table-column :label="$t('msg.excel.avatar')" align="center">
					<template v-slot="{ row }">
						<el-image class="avatar" :src="row.avatar" :preview-src-list="[row.avatar]"></el-image>
					</template>
				</el-table-column>
				<el-table-column :label="$t('msg.excel.role')">
					<template #default="{ row }">
						<div v-if="row.role && row.role.length > 0">
							<el-tag v-for="item in row.role" :key="item.id" size="default">{{
				        item.title
				      }}</el-tag>
						</div>
						<div v-else>
							<el-tag size="default">{{ $t('msg.excel.defaultRole') }}</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column :label="$t('msg.excel.openTime')">
					<template #default="{ row }">
						{{ $filters.dateFilter(row.openTime) }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('msg.excel.action')" fixed="right" width="260">
					<template #default="{ row }">
						<el-button @click="onShowClick(row._id)" type="primary" size="default">
							{{ $t('msg.excel.show') }}
						</el-button>
						<el-button v-permission="['distributeRole']" @click="onShowRoleClick(row)" type="info"
							size="default">
							{{ $t('msg.excel.showRole') }}
						</el-button>
						<el-button v-permission="['removeUser']" @click="onRemoveClick(row)" type="danger"
							size="default">
							{{ $t('msg.excel.remove') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background class="pagination" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page="page" :page-sizes="[2, 5, 10, 20]"
				:page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>

		<export-excel v-model="exportToExcelVisible"></export-excel>

		<roles-dialog @updateRole="getListData" :userId="selectUserId" v-model="roleDialogVisible"></roles-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onActivated,
		watch
	} from 'vue'

	import {
		getUserManageList,
		deleteUser
	} from '@/api/user-manage'

	import {
		watchSwitchLang
	} from '@/utils/i18n'

	import {
		useRouter
	} from 'vue-router'

	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	import {
		useI18n
	} from 'vue-i18n'

	import ExportExcel from './components/Export2Excel'

	import RolesDialog from './components/roles'

	// 数据相关
	const tableData = ref([])
	const total = ref(0)
	const page = ref(1)
	const size = ref(2)

	// 获取数据的方法
	const getListData = async () => {
		const result = await getUserManageList({
			page: page.value,
			size: size.value
		})

		tableData.value = result.list
		total.value = result.total
	}
	getListData()

	watchSwitchLang(getListData)

	// keep-alive缓存，重新激活时调用
	onActivated(getListData)

	const handleSizeChange = currentSize => {
		size.value = currentSize
		getListData()
	}

	const handleCurrentChange = currentPage => {
		page.value = currentPage
		getListData()
	}

	// excel导入按钮点击事件
	const router = useRouter()

	const onImportExcelClick = () => {
		router.push('/user/import')
	}

	// 删除用户
	const i18n = useI18n()

	const onRemoveClick = (row) => {
		ElMessageBox.confirm(
			i18n.t('msg.excel.dialogTitle1') +
			row.username +
			i18n.t('msg.excel.dialogTitle2'), {
				type: 'warning'
			}
		).then(async () => {
			await deleteUser(row._id)
			ElMessage.success(i18n.t('msg.excel.removeSuccess'))
			// 重新渲染数据
			getListData()
		})
	}

	// 导出数据
	const exportToExcelVisible = ref(false)

	const onToExcelClick = () => {
		exportToExcelVisible.value = true
	}

	// 查看用户详情
	const onShowClick = id => {
		router.push(`/user/info/${id}`)
	}

	// 为员工分配角色
	const roleDialogVisible = ref(false)
	const selectUserId = ref('')
	const onShowRoleClick = row => {
		roleDialogVisible.value = true
		selectUserId.value = row._id
	}

	// 保证每次打开dialog都 可以重新弄获取数据
	watch(roleDialogVisible, val => {
		if (!val) selectUserId.value = ''
	})
</script>

<style lang="scss" scoped>
	.user-manage-container {
		.header {
			margin-bottom: 22px;
			text-align: right;
		}

		:deep .avatar {
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}

		:deep .el-tag {
			margin-right: 6px;
		}

		.pagination {
			margin-top: 20px;
			text-align: center;
		}
	}
</style>
